<template>
    <div class="login-title">用户登录</div>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="账号登录" name="account">
            <AccountLogin></AccountLogin>
        </el-tab-pane>
        <el-tab-pane label="邮箱登录" name="email">
            <EmailLogin></EmailLogin>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="phone">
            <PhoneLogin></PhoneLogin>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
import AccountLogin from './AccountLogin.vue';
import EmailLogin from './EmailLogin.vue';
import PhoneLogin from './PhoneLogin.vue';

import { ref } from 'vue'

const activeName = ref('account')



</script>

<style lang="scss" scoped>
.login-title {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
    font-size: 24px;
    color: #444;
    letter-spacing: 4px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}</style>